<script setup>
// reactive 可以让一个引用类型的数据具备响应式
import { getCurrentInstance, ref, reactive } from 'vue'
// console.log(this);

const { ctx } = getCurrentInstance()

const data = {
  name: '张三',
  age: 18
}

// 点击后执行的函数
function changeName() {
  data.name = '老吴'

  console.log(data);
  // 强制渲染
  ctx.$forceUpdate()
}


// ref 做响应式
const admin = ref({
  adminname: 'q',
  password: 'w'
})
function changeAdmin() {
  admin.value.adminname = 'qqqqqqq'
  admin.value.password = 'wwwwwww'
}


// reactive 可以让一个引用类型的数据具备响应式
// 不需要 .value
const user = reactive({
  name: '老王',
  sex: '女'
})
function changeUser() {
  user.name = '老李'
}

</script>
<template>
  <h1> {{ data.name }} -- {{ data.age }} </h1>
  <button @click="changeName">点击修改名称</button>
  <br>

  <h1> {{ admin.adminname }} -- {{ admin.password }} </h1>
  <button @click="changeAdmin">点击修改 admin</button>

  <br>

  <h1>{{ user.name }} -- {{ user.sex }}</h1>
  <button @click="changeUser">点击修改 user</button>
</template>